<template>
    <div class="singer-intro">
      <div>
        <h2>简介</h2>
        <div>{{ desc }}</div>
      </div>
      <div>
        <h2>基本资料</h2>
        <div>
          <div v-for="(item, index) in basicItem" :key="index">
            <span>{{ item.key }}:</span>
            <span style="white-space: pre-wrap">{{ item.value }}</span>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in otherItem" :key="index">
        <span>{{ item.key }}</span>
        <span style="white-space: pre-wrap">{{ item.value }}</span>
      </div>
    </div>
  </template>
  
  
  
  <script>
  export default {
    props: ["singerId"],
    data() {
      return {
        desc: "", //简介描述
        basicItem: [], //基本资料
        otherItem: [], //其他（从艺历程和荣誉记录）
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$request("get", "/singer/desc", {
          singermid: this.singerId,
        }).then((res) => { 
          console.log(res);
          this.desc = res.data.desc;
          this.basicItem = res.data.basic.item;
          this.otherItem = res.data.other.item;
        });
      },
    },
  };
  </script>
  
  
  <style scoped>
  .singer-intro{
      text-align: left;
      padding: 0 1rem;
  }
  </style>
